<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 30px">
      <el-breadcrumb-item :to="{ path: '/essay' }">文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $route.query.editTitle }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      :model="essayForm"
      :rules="rules"
      ref="essayForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="essayForm.title" style="width: 600px" placeholder="文章标题"></el-input>
      </el-form-item>
      <el-form-item label="文章类型" prop="essayType">
        <el-select v-model="essayForm.essayType" placeholder="请选择文章类别" default-first-option>
          <el-option label="救助类" value="1"></el-option>
          <el-option label="分享类" value="2"></el-option>
          <el-option label="科普类" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章内容" prop="content" style="margin-right: 40px">
        <vue-editor v-model="essayForm.content" />
      </el-form-item>
    </el-form>
    <div class="addBtn" style="text-align: center;">
      <el-button type="primary" plain @click="resetForm('essayForm')">重置</el-button>
      <el-button type="primary" @click="submitForm('essayForm')">发布</el-button>
    </div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    essayForm: {
      essayId: "",
      userId: 1,
      title: "",
      essayType: "",
      content: "<h2>文章正文</h2>",
      flag: 0
    },
    rules: {
      title: [
        { required: true, message: "请输入文章标题", trigger: "blur" },
        {
          min: 5,
          max: 100,
          message: "长度在 5 到 100 个字符",
          trigger: "blur",
        },
      ],
      essayType: [
        { required: true, message: "请选择文章类别", trigger: "change" },
      ],
      content: [
        { required: true, message: "请输入文章正文", trigger: "blur" },
        {
          min: 10,
          max: 1000,
          message: "长度在 10 到 1000 个字符",
          trigger: "blur",
        },
      ],
    },
  }),
  mounted(){
    this.essayForm = this.$getSessionStorage("essay");
    this.essayForm.userId = 1;  // 待修改
  }, 
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.$route.query.editTitle == '编辑文章') {
            this.onUpdate()
          } else {
            this.onAddData()
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onAddData(){
      this.$axios.post("essay/insertEssay", {
        userId: this.essayForm.userId,
        title: this.essayForm.title,
        essayType: this.essayForm.essayType,
        content: this.essayForm.content,
        flag: this.essayForm.flag
      }).then((result) => {
        if (result.data == 1) {
            // 添加数据后刷新数据
            this.$router.push('/essay')
            this.$message({
              showClose: true,
              message: "添加成功！",
              type: "success",
            });
        }
        
      }).catch((err) => {
        alert(err)
      });
    },
    onUpdate(){
      this.$axios
        .post("essay/updateEssayById", {
          essayId: this.essayForm.essayId,
          title: this.essayForm.title,
          essayType: this.essayForm.essayType,
          content: this.essayForm.content,
        })
        .then((result) => {
          if (result.data == 1) {
            // 编辑数据后刷新数据
            this.$router.push('/essay')
            this.$removeSessionStorage('essay')
          }
        })
        .then(() => {
          this.$message({
            showClose: true,
            message: "更新成功！",
            type: "success",
          });
        })
        .catch((err) => {
          alert(err);
        });
    },
  },
  
};
</script>